<template>
	<view class="">
		<view class="nav">
			<view :class="['nav_item',nav_index == index ? 'nav_item_i':'']" 
			@tap="change(index)" 
			v-for="(item, index) in navList" 
			:key= "index">
				{{item.title}}{{item.num ? '('+item.num+')' : ''}}
				<view class="line" >
				</view>
			</view>
		</view>
		<scroll-view class="coupon-con" scroll-y :style="{height:searchHeight+'px'}">
			<sh-liload v-if="shLoad"></sh-liload>
			<view class="coupon-view" v-if="list.length">
				<uni-coupon-list :status="nav_index" v-for="(item,index) in list" :key="index" :index="index" :getData="item" @Tips="Tips"></uni-coupon-list>
			</view>
			<sc-no v-else url="add_images/coupon-sc.png" width="30%" nofont="暂无优惠券"></sc-no>
		</scroll-view>
		<!-- <no-use v-if="!nav_index" :discountlist="discountlist"></no-use>
		<use-has  v-else-if="nav_index == 1" :discountlist="discountlist"></use-has>
		<overdue v-else :discountlist="discountlist"></overdue> -->
		<shop-loading v-if="shopLoad" :bg="bgColor"></shop-loading>
	</view>
</template>

<script>
	import useHas from '@/components/discount/use.vue'
	import noUse from '@/components/discount/nouse.vue'
	import overdue from '@/components/discount/overdue.vue'
	import uniCouponList from '@/components/uni-couponlist/uni-couponlist.vue';
	import shLiload from '@/components/shLiload/shLiload.vue';
	import lieList from '@/mixins/list.js';
	import { couponUser } from '@/common/index.js';
	export default {
		components: {
			useHas,
			noUse,
			overdue,uniCouponList,shLiload
		},
		mixins:[lieList],
		data () {
			return {
				list:[],
				navList:[
					{
						title: '未使用',
						num: 0
					},
					{
						title: '已使用',
						num: 0
					},
					{
						title: '已过期',
						num: 0
					}
				],
				discountlist: [
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					},
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					},
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					}
				],
				nav_index:0,
				searchHeight:0,
				shopLoad:true,
				bgColor:'#ffffff',
				shLoad:true
			}
		},
		mounted(){
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
					const query = uni.createSelectorQuery()
					query.select('.nav').boundingClientRect(data => {
						that.searchHeight = res.windowHeight - data.height;
						// uni.setStorageSync('searchHeight',data.height)
					}).exec();
			    }
			});
		},
		methods: {
			change (key) {
				if(key == this.nav_index){
					return false;
				}
				this.nav_index = key;
				this.page = 1;
				this.list = [];
				this.getData()
			},
			Tips(index){
				let list = this.list;
				list.forEach((item,ind)=>{
					if(ind == index){
						item.tipsShow = !item.tipsShow
					}else{
						item.tipsShow = false
					}
				})
				this.list = JSON.parse(JSON.stringify(list));
			},
			//初始数据
			getData(){
				const { page,nav_index } = this;
				let params = {
					state:nav_index,
					page
				}
				this.shLoad = true;
				couponUser(params).then(res=>{
					if(res.code == 1){
						const data = res.msg.data;
						if(data.length>0){
							this.loadingType = res.msg.last_page > 1 ? 0 : 2;
							// data.forEach((item,index)=>{
								
							// })
							this.navList[0].num = res.msg.not_used;
							this.navList[1].num = res.msg.used;
							this.navList[2].num = res.msg.expire;
							this.list = data;
							this.page++;
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}else{
							this.list = [];
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
						this.shopLoad = false;
						this.shLoad = false;
					}else{
						this.toast(res.msg)
						this.shopLoad = false;
						this.shLoad = false;
					}
				}).catch()
			},
			getmoreNews(){
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				const {page,nav_index} = this;
				let params = {
					state:nav_index,
					page
				}
				couponUser(params).then(res=>{
					if(res.code == 1){
						const data = res.msg.data;
						if(data.length>0){
							this.list = this.list.concat(data);
							this.page++;
							uni.hideNavigationBarLoading();
							this.loadingType = 0;//将loadingType归0重置
						}else{
							uni.hideNavigationBarLoading();
							this.loadingType = 2;
						}
					}else{
						this.toast(res.msg)
					}
				}).catch()
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="less" scoped>
	.coupon-con{
		position: relative;
	}
	.coupon-view{
		padding: 20upx 30upx;
		width: 100%;
		box-sizing: border-box;
	}
	.nav {
		width: 100%;
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.nav_item {
			text-align: center;
			line-height: 90upx;
			font-size: 32upx;
			color: #333333;
			z-index: 10;
			position: relative;
			.line {
				display: none;
			}
		}
		.nav_item_i {
			color: #f73e2f;
			.line {
				display: block;
			}
		}
		.line {
			position: absolute;
			bottom:20upx;
			width: 100%;
			height: 20upx;
			background-color: #fdd8d5;
			border-radius: 10upx;
			z-index: -1;
		}
	}
</style>
